<template>
	<view>
		<view class="heads">
			<view class="head"><text>手机验证</text></view>
		</view>
		<!-- <return-key></return-key> -->
		<view class="contents">
			<view class="auth">
				<text style="margin-top: 20rpx;">手机号</text>
				<view class="moneybox">
					<input placeholder="请输入手机号码" v-model="phonenumber" maxlength="11"/>
				</view>
				<!-- <view class="moneyboxs">
					<image src="../../../static/soujiyanzen.png" mode=""></image>
					<input placeholder="请输入手机验证码" v-model="phoncode" />
					<view class="indexdel">
						<text class="indextext" @click="getphone">{{ text }}</text>
					</view>
				</view> -->
				<text style="margin-top: 20rpx;">验证码</text>
				<view class="moneyboxs">
					<input type="number" placeholder="输入验证码" v-model="code" :maxlength="maxlength" />
          <view class="indexdel">
          	<text class="indextext" @click="getPhoneCode">{{ text }}</text>
          </view>
        </view>
				<!-- <view class="tishi_text" v-if="tishistate">密码至少包含数字和英文，长度为6-20</view> -->
			</view>
			<button class="btn" @click="nextStep" hover-class="active-btn">下一步</button>
			<!-- <button class="btn" @click="register()">注册</button> -->

			<!-- <view class="otherclass">
				<view class="othertext">—— 其他注册方式 ——</view>
				<image src="../../../static/weixin.png" mode="" @click="toweixinlogin()"></image>
			</view> -->
		</view>
	</view>
</template>

<script>
// 	import jswx from '../../../common/jwx.js';
// import returnKey from '@/components/return/return.vue';
export default {
	
	data() {
		return {
			time: 60,
			code: '',
			phoncode: '',
			refnumber: '',
			maxlength: 6,
			text: '获取验证码',
			phonenumber: '',
			tishistate: false,
			recommend_id: 0,
      countDown: true
		};
	},
	onBackPress(event) {
		uni.switchTab({
			url:"../index/index"
		})
		return true
	},
	onShow() {},
	onLoad() {},
	methods: {
    // 验证码倒计时
    timeout() {
    	const that = this;
    	if (parseInt(that.time) == 0) {
    		that.text = '获取验证码';
    		that.time = 60;
        that.countDown = false
    	} else {
    		that.time--;
    		that.text = that.time;
    		setTimeout(() => {
    			that.timeout();
    		}, 1000);
    	}
    },

    // 获取手机验证码
		getPhoneCode () {
      if (this.countDown) {
        if (this.phonenumber === '') {
          uni.showToast({
            duration: 1500,
            icon: 'none',
            title: '手机号不能为空'
          })
        } else if (!(/1[3|4|5|7|8|9][0-9]{9}/.test(this.phonenumber))) {
          uni.showToast({
            duration: 1500,
            icon: 'none',
            title: '手机号格式错误'
          })
        } else {
          this.timeout()
          this.countDown = false
        }
      }
    },

    // 下一步
    nextStep () {
      console.log(1)
    }
	},
};
</script>

<style lang="scss" scoped>
.heads {
	display: flex;
	flex-direction: column;
	padding-top: 30px;
	margin-left: 35px;
}
.head {
	height: 45px;
	font-size: 48rpx;
	font-family: Noto Sans S Chinese;
	font-weight: 400;
	color: #000000;
}
.wellcome {
	width: 223px;
	height: 35px;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #666666;
}

.contents {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.auth {
	display: flex;
	flex-direction: column;
	margin-top: 30rpx;
}

.moneybox {
	display: flex;
	flex-direction: row;
	padding-bottom: 10rpx;
	// margin-left: 39rpx;
	width: 600rpx;
	padding-top: 25rpx;
	// margin-top: 249rpx;
	// border: 1rpx solid red;
	border-bottom: 1px solid rgba(153, 153, 153, 0.5);
}
image {
	width: 32rpx;
	height: 36rpx;
	margin-right: 20rpx;
}
.tishi_text {
	color: #fbc102;
	font-size: 26rpx;
	margin-top: 20rpx;
}
.moneyboxs {
	display: flex;
	flex-direction: row;
	// padding-bottom: 10rpx;
	// margin-left: 39rpx;
	padding-top: 25rpx;
	border-bottom: 1px solid rgba(153, 153, 153, 0.5);
}
.indextext {
	font-size: 26rpx;
	font-weight: 400;
	color: #fbc102;
	line-height: 20rpx;
}

.indexdel {
	display: flex;
	width: 180rpx;
	height: 60rpx;
	justify-content: center;
	align-items: center;
	border-radius: 10rpx;
	margin-left: 70rpx;
}

.btn {
	width: 600rpx;
	height: 100rpx;
	font-size: 30rpx;
	font-weight: 600;
	color: rgba(255, 255, 255, 1);
	line-height: 100rpx;
	margin-top: 60rpx;
	background: #2468CD;
	border-radius: 20rpx;
}
.fangshi {
	width: 600rpx;
	margin-top: 30rpx;
	display: flex;
	justify-content: space-between;
	color: #262626;
	font-size: 28rpx;
}
.otherclass {
	margin-top: 400rpx;
	color: #8f8f8f;
	font-size: 28rpx;
	image {
		width: 100rpx;
		height: 100rpx;
		margin-top: 40rpx;
		margin-left: 100rpx;
	}
}
.active-btn{
  background-color: rgba(36, 104, 205, 0.8);
}
</style>
